<script setup lang="ts">
import { onMounted } from "vue";
import * as echarts from "echarts";
//组件加载完成
onMounted(() => {
  //初始化图表
  initCharts();
});
//初始化图表
function initCharts() {
  //创建图表
  const myChart = echarts.init(document.getElementById("main_order"));
  //设置图表参数
  myChart.setOption({
    title: { text: "2022 年订单数量" },
    color: ["#1493fa"],
    grid: {
      left: "3%",
      right: "8%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: [
        "1 月",
        "2 月",
        "3 月",
        "4 月",
        "5 月",
        "6 月",
        "7 月",
        "8 月",
        "9 月",
        "10 月",
        "11 月",
        "12月",
      ],
      name: "月份",
      // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
      axisTick: {
        alignWithLabel: true,
      },
      axisLabel: {
        interval: 0,
        rotate: 45, // 设置刻度标签旋转角度为 45 度
      },
    },
    legend: {},
    yAxis: {
      name: "单位（个）",
    },
    series: [
      {
        data: [400, 450, 300, 230, 250, 300, 400, 350, 160, 350, 380, 400],
        type: "bar",
        barWidth: "60%",
        name: "订单总数",
        label: {
          show: true,
          position: "top",
        },
      },
    ],
  });
  // 图表自适应大小
  window.addEventListener("resize", () => {
    myChart.resize();
  });
}
</script>
<template>
  <section class="order">
    <!--显示图表的容器-->
    <div id="main_order"></div>
  </section>
</template>
<style scoped>
.order {
  border: 1px solid #e4e7ed;
  border-radius: 5px;
  width: 50%;
  box-shadow: 0px 0px 5px 5px #e4e7ed;
  margin: 20px 20px 20px 0px;
  display: flex;
}
.order #main_order {
  width: 100%;
  height: 300px;
  margin: 10px;
}
</style>
